<!--
 * @Description: detailsAnswer  -- 答疑详情
 * @Author: your name
 * @Date: 2024-04-16
 * @LastEditTime: 2024-04-16
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="detailsAnswer">
    <div class="foo">
      <div class="mainmar heart_w">
        <div class="issuetxt" :style="{ overflow: hidden_val ? '' : 'hidden' }">
          <div class="top_xin">
            <img
              src="http://www.rongyuejiaoyu.com/static/index/images/head4.jpg"
              alt=""
            />
            <div class="answer_top">
              <h5>
                <span class="comer" style="margin-right: 16px">
                  来自：{{ detailsObj.cate_name }}&nbsp;>&nbsp;
                  {{ detailsObj.level_name }}&nbsp;
                </span>
                <span class="timer"> {{ detailsObj.createtime }} </span>
              </h5>
              <div class="ptxts">
                {{ detailsObj.title }}
              </div>
            </div>
          </div>

          <ul
            class="imgroom"
            :style="{
              position: 'relative',
              height: conHeight + 'px',
              transition: 'all 1s ease 0s'
            }"
          >
            <li
              class="parentCls"
              v-for="item_img in detailsObj.images"
              :key="item_img"
            >
              <a href="javascript:void(0)" class="wntimg">
                <img :src="item_img" alt="" modal="zoomImg" />
              </a>
            </li>
          </ul>

          <div class="lookmore" @click="ImgLength">
            <img src="/static/new2.0/img/20ryicon32.png" alt="" />
            <span> 查看更多 </span>
            <!-- <span>收起</span> -->
          </div>
        </div>

        <div class="tiwenzhe">
          <div class="tiwen_top">
            <div class="t-mes">
              <img
                src="http://www.rongyuejiaoyu.com/static/index/images/head4.jpg"
                alt=""
              />
              <p>188****5356</p>
            </div>
            <div class="t-tt">
              <div>
                <p>提问</p>
                <p>6</p>
              </div>
              <div>
                <p>上次登录</p>
                <p>304天前</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="decks heart_w">
      <div class="main_left">
        <div class="answer_top">
          <span>全部回复(1)</span>
        </div>
        <div
          class="answer_list"
          v-for="item in getQuestionReplyList"
          :key="item.id"
        >
          <div class="img_box">
            <img :src="item.teacher_image" alt="" />
          </div>

          <div class="content_list">
            <div class="tit_box">
              <p class="name_p">
                {{ item.teacher_name }} &nbsp;&nbsp;&nbsp;&nbsp;
                {{ detailsObj.createtime }}
              </p>
              <p class="starttip_p">致精进的你:</p>
              <p class="content_p">
                {{ item.content }}
              </p>
              <p class="endtip_p">
                The real talent is resolute aspirations.<br />真正的才智是刚毅的志向。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="main_right">999</div>
    </div>
  </div>
</template>

<script>
import { getQuestionInfo, getQuestionReply } from '@/api/consult/question.js'
export default {
  name: 'detailsAnswer',
  data() {
    return {
      hidden_val: false,
      conHeight: '',
      detailsObj: {},
      getQuestionReplyList: [] // 获取问题回复
    }
  },
  created() {
    this.getListInfoDetails()
  },
  mounted() {
    setTimeout(() => {
      if (document.querySelector('.imgroom').offsetHeight <= 300) {
        this.conHeight = document.querySelector('.imgroom').offsetHeight
        this.conHeightCopy = document.querySelector('.imgroom').offsetHeight
        this.hidden_val = true
      } else {
        this.conHeight = 320
        this.conHeightCopy = document.querySelector('.imgroom').offsetHeight
        this.hidden_val = false
      }
    }, 500)
  },
  methods: {
    ImgLength() {
      if (this.conHeight > 320) {
        this.conHeight = 320
        this.hidden_val = false
      } else {
        this.conHeight = this.conHeightCopy
        this.hidden_val = true
      }
    },
    async getListInfoDetails() {
      let params = {
        id: 1 // 项目id
      }
      const { data: data } = await getQuestionInfo(params)
      this.detailsObj = data.data
      console.log(22222222, data)

      // 获取问题回复
      const { data: data_h } = await getQuestionReply({ id: 1 })
      this.getQuestionReplyList = data_h.data.list
      console.log(data_h.data, '获取问题回复')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/detailsAnswer.scss';
</style>
